<template>
  <div>
    <a v-print="printObj" style="color: #fff">确定</a>
    <div v-show="false">
      <div id="printMe">
        <div style="width: 100%; height: 10mm"></div>
        <p>
          <span>{{ detailData.date }}</span
          ><span style="margin-left: 10px">{{ detailData.realname }}制</span>
        </p>
        <div class="scan">
          <vue-qr
            :text="JSON.stringify({ id: detailData.id, EntityType: 'workOrder', orderCode: detailData.orderCode })"
            :size="120"
            :margin="0"
          ></vue-qr>
          <p class="code">{{ detailData.orderCode || '-' }}</p>
        </div>
        <h2 style="text-align: center; width: 100%">工单流转卡</h2>
        <div style="height: 60px"></div>
        <div class="list">
          <p>
            <span>工单编号：</span>
            <span>{{ detailData.orderCode || '-' }}</span>
          </p>
          <p>
            <span>关联订单：</span>
            <span>{{ detailData.sellOrderCode || '-' }}</span>
          </p>
          <p style="width: 100%">
            <span>计划时间：</span>
            <span
              >{{ moment(detailData.planStartTime).format('YYYY-MM-DD HH:mm') || '-' }} ~
              {{ moment(detailData.planEndTime).format('YYYY-MM-DD HH:mm') || '-' }}</span
            >
          </p>
          <p>
            <span>物品编号：</span>
            <span>{{ detailData.serialNumber || '-' }}</span>
          </p>
          <p>
            <span>物品名称：</span>
            <span>{{ detailData.serialName || '-' }}</span>
          </p>
          <p>
            <span>规格：</span>
            <span>{{ detailData.serialSpecifications || '-' }}</span>
          </p>
          <p>
            <span>计划生产数量：</span>
            <span>{{ detailData.planProduceNum || '-' }}</span>
          </p>
          <p>
            <span>单位：</span>
            <span>{{ detailData.unitName || '-' }}</span>
          </p>
        </div>
        <h2 style="width: 100%; margin-top: 30px; margin-bottom: -10px">生产任务</h2>
        <table class="table" border>
          <tr>
            <td>序号</td>
            <td>任务二维码</td>
            <td>工序名称</td>
            <td>任务时间</td>
            <td>生产人员</td>
            <td>计划数</td>
            <td>合格数</td>
            <td>不合格数</td>
          </tr>
          <tr v-for="(item, index) in detailData.produceOrderTaskVo" :key="index">
            <td>{{ index+1 }}</td>
            <td>
              <vue-qr
                :text="JSON.stringify({ id: item.taskId, EntityType: 'productTask' })"
                :size="120"
                :margin="0"
              ></vue-qr>
            </td>
            <td>{{ item.processesName || '-' }}</td>
            <td>{{ item.planStartTime + '~' + item.planEndTime || '-' }}</td>
            <td></td>
            <td>{{ item.planProduceNum || '-' }}</td>
            <td>{{ item.qualifiedNum || '' }}</td>
            <td>{{ item.unqualifiedNum || '' }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import print from 'vue-print-nb'
import moment from 'moment'
import vueQr from 'vue-qr'
import { getAction } from '../../../../api/manage'
export default {
  props: {
    row: {
      type: Object,
      default: {},
    },
  },
  directives: {
    print,
  },
  data() {
    return {
      moment,
      printObj: {
        id: 'printMe',
        previewBeforeOpenCallback(vue) {
          console.log('正在加载预览窗口', vue)
        },
        previewOpenCallback(vue) {
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback(vue) {
          console.log('打开之前', vue)
          vue.printLoading = true
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        },
        clickMounted(vue) {
          vue.$emit('changePrint')
          console.log('点击v-print绑定的按钮了！')
        },
      },
      detailData: {
        orderTaskListVoList: [],
        id: '',
      },
    }
  },
  watch: {},
  components: { vueQr },
  created() {
    console.log(this.row, 'row')
    let realname = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.realname
    let date = moment(new Date()).format('YYYY-MM-DD')
    this.detailData = this.row
    let monet = this.row.timePeriod.split('~')

    this.detailData.planStartTime = monet[0]
    this.detailData.planEndTime = monet[1]
    this.detailData.realname = realname
    this.detailData.date = date
    // getAction('/produceorder/produceOrderInfo/queryById', { id: this.id }).then((res) => {
    //   console.log(res, 'resssssss')
    //   if (res.code === 200) {

    //     this.detailData = res.result
    //     this.detailData.realname = realname
    //     this.detailData.date = date
    //     let monet = res.result.timePeriod.split('~')

    //     this.detailData.planStartTime = monet[0]
    //     this.detailData.planEndTime = monet[1]
    //     console.log(this.detailData, 'detailData')
    //   }
    // })
  },
  mounted() {},
  methods: {},
}
</script>
<style lang="less" scoped>
.scan {
  position: absolute;
  top: 10mm;
  right: 0;
}

.code {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
}

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  p {
    width: 50%;
    color: #000;
    font-size: 16px;
    font-weight: 500;
  }
}

.table {
  margin-top: 20px;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-weight: 500;

  td {
    padding: 10px;
  }
}
</style>
